import SelectDeptList from "@/components/Sansan/SelectDeptList";
import BaseSearchForm from "@/components/SearchForm/BaseSearchForm";
import { shortcuts } from "@/hooks/useTime";
import { getDictList } from "@/utils/cacheUtil";
// import { dayjs } from "element-plus";
import { getCurrentInstance, defineComponent, ComponentInternalInstance } from "vue";
export default defineComponent({
	props: {
		//是否展开更多搜索
		collapsed: Boolean,
		//是否是固定搜索
		fiexdTarget: Boolean,
		//搜索参数
		param: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const state = reactive({
			collapsed: true,
			warningLevel: [],
			alarmType: [],
			timeRange: ["", ""],
			shortcuts: [
				{
					text: "近一周",
					value: () => {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						return [start, end];
					}
				},
				{
					text: "近一月",
					value: () => {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						return [start, end];
					}
				},
				{
					text: "近三月",
					value: () => {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						return [start, end];
					}
				}
			]
		});
		onMounted(async () => {
			state.warningLevel = (await getDictList("warning_level")) as any;
			state.alarmType = (await getDictList("alarm_type")) as any;
		});
		watchEffect(() => {
			state.collapsed = props.collapsed;
		});
		watch(
			() => state.timeRange,
			nval => {
				if (nval.length) {
					props.param.startTime = nval?.[0];
					props.param.endTime = nval?.[1];
				}
			}
			// { immediate: true }
		);
		const submit = () => {
			props.param.startTime = state.timeRange?.[0];
			props.param.endTime = state.timeRange?.[1];
			emit("submit");
		};
		return () => {
			return (
				<BaseSearchForm v-model:collapsed={state.collapsed}>
					<el-form
						class="flex flex-wrap pt-4 pl-4 pr-4 bg-white"
						onKeyup={(e: KeyboardEvent) => (e.keyCode == 13 ? emit("submit") : null)}
					>
						<el-form-item class="search-item" label={proxy?.$t("alarmlist.search_label.group")}>
							<SelectDeptList detail={props.param} appendChild />
						</el-form-item>
						{props.fiexdTarget ? null : (
							<>
								<el-form-item class="search-item" label={proxy?.$t("alarmlist.search_label.sn")}>
									<el-input v-model={props.param.sn} style="width:150px" placeholder={proxy?.$t("alarmlist.placeholder.sn")} />
								</el-form-item>
								<el-form-item class="search-item" label={proxy?.$t("alarmlist.search_label.var_name")}>
									<el-input
										v-model={props.param.varName}
										style="width:150px"
										placeholder={proxy?.$t("alarmlist.placeholder.var_name")}
									/>
								</el-form-item>
							</>
						)}
						<el-form-item class="search-item" label={proxy?.$t("alarmlist.search_label.alarm_type")} prop="alarmType">
							<el-select
								v-model={props.param.alarmType}
								class="flex-1"
								placeholder={proxy?.$t("searchformitem.placeholder.select")}
							>
								{state.alarmType.map((item: any) => {
									return <el-option value={item.key} label={item.label}></el-option>;
								})}
							</el-select>
						</el-form-item>
						<el-form-item class="search-item" label={proxy?.$t("alarmlist.search_label.alarm_level")}>
							<el-select
								v-model={props.param.alarmLevel}
								style="width:150px"
								clearable
								placeholder={proxy?.$t("searchformitem.placeholder.select")}
							>
								{state.warningLevel.map((level: any) => {
									return <el-option label={level.label} value={level.key}></el-option>;
								})}
							</el-select>
						</el-form-item>

						{/* 高级查询 */}
						{state.collapsed ? null : (
							<el-form-item class="search-item" label="告警时间">
								<el-date-picker
									v-model={state.timeRange}
									style="width:330px"
									type="daterange"
									unlink-panels
									format="YYYY-MM-DD HH:mm:ss"
									value-format="YYYY-MM-DD HH:mm:ss"
									shortcuts={shortcuts()}
									range-separator="至"
									start-placeholder="开始时间"
									end-placeholder="截止时间"
								/>
							</el-form-item>
						)}
						<el-form-item class="search-item">
							<el-button type="primary" class="iconfont iconsearch" onClick={() => submit()}>
								{proxy?.$t("common.btn.search")}
							</el-button>
							<el-button
								class="iconfont iconsearch"
								onClick={() => {
									state.timeRange = [];
									for (let key in props.param) {
										props.param[key] = null;
									}
									// submit();
								}}
							>
								{proxy?.$t("common.btn.reset")}
							</el-button>
						</el-form-item>
					</el-form>
				</BaseSearchForm>
			);
		};
	}
});
